<template>
  <div class="g-flex-center-center--column no-permission-page">
    <img class="no-permission-image" src="@/assets/images/401.png" />
    <span class="no-permission-title">401 当前页面禁止访问</span>
    <span class="no-permission-tips">认证失败，请联系系统管理员</span>
    <div>
      <el-button type="default" @click="handleGoBack">返回上页</el-button>
      <el-button type="default" @click="handleGoHome">返回首页</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup name="NoPermission">
import { useRouter } from 'vue-router';
const router = useRouter();
function handleGoBack() {
  router.go(-1);
}
function handleGoHome() {
  router.push('/');
}
</script>
<style lang="scss" scoped>
.no-permission-page {
  width: 100%;
  height: 70vh;
  .no-permission-image {
    width: 220px;
    height: 140px;
  }
  .no-permission-title {
    margin-top: 8px;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 500;
    color: #0a1f33;
    line-height: 22px;
  }
  .no-permission-tips {
    margin-top: 8px;
    margin-bottom: 24px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #7a8a99;
    line-height: 22px;
  }
}
</style>
